<template>
  <div class="my-data-detail">
    <main-card :title="detailInfo?.name" :crumbs="crumbs" :flex-start="true" :show-screen-space="false">
      <template #subheading>
        <p v-if="detailInfo?.description" class="subtitle">{{ detailInfo?.description }}</p>
      </template>
      <template #tool-btn>
        <div class="btn-list">
          <a-button
            type="text"
            style="width: 36px; height: 36px"
            class="icon-only-btn"
            @click="fileTaskStore.changeTaskListOptions({ open: true })"
            ><i class="iconfont icon-tasklist-line"></i
          ></a-button>
          <collect-button
            msg="是否取消收藏此数据集？"
            :default-status="detailInfo?.isFavorite"
            :favorite-obj-type="3"
            :favorite-obj-name="detailInfo?.name"
            :favorite-obj-id="parentId"
          />
          <a-button type="primary" class="icon-with-button" @click="handleDownViewMore">
            <i class="iconfont icon-download-2-line"></i>下载
          </a-button>
        </div>
      </template>
      <div class="my-12">
        <a-spin :spinning="loading" tip="加载中...">
          <div class="image-list-card min-h-650">
            <ul class="header">
              <li>
                <p>大小</p>
                <p>
                  <span>{{ sizeFilter(Number(detailInfo?.size)) }}</span>
                </p>
              </li>
              <li>
                <p>文件数</p>
                <p>
                  <span>{{ detailInfo?.fileNum }}</span>
                </p>
              </li>
            </ul>
            <div class="flex-col fbc min-h-594">
              <ul v-if="detailInfo?.urls.length" class="image-list-card-wrap">
                <li v-for="url in detailInfo?.urls" :key="url">
                  <img :src="customImgUrl(url, 210, 130)" alt="" />
                </li>
              </ul>
              <div v-if="detailInfo?.urls.length" class="image-list-card-footer">
                <div v-if="detailInfo?.urls.length > 48">下载查看更多</div>
              </div>
              <default-graph v-else height="384px" title="">
                <a-empty :image="simpleImage" description="暂无文件" />
              </default-graph>
            </div>
          </div>
        </a-spin>
      </div>
    </main-card>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { Empty } from 'ant-design-vue'
  import { sizeFilter } from 'g6-fn'
  import { computed, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import CollectButton from '@/components/CollectButton/index.vue'
  import DefaultGraph from '@/components/DefaultGraph/index.vue'
  import { useFileTaskStore } from '@/components/FileTaskCard/upload-store'
  import manualMessage from '@/components/ManualMessage/index'
  import { customerPublicDataSetApi } from '@/services/api'
  import { customImgUrl } from '@/utils'

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

  export interface QueryPublicType {
    createTime: string
    description: string
    fileNum: number
    id: string
    isFavorite: boolean
    name: string
    size: number
    updateTime: string
    urls: string[]
  }
  const route = useRoute()

  const parentId = route.params.id as string
  const parentPath = route.query.parent as string
  const parentName = route.query.parentName as string
  const loading = ref(false)

  // 查询当前的数据
  const detailInfo = ref<QueryPublicType>()

  const getData = async () => {
    loading.value = true
    const { data: info } = await customerPublicDataSetApi.publicInfo({ bucketId: parentId })
    detailInfo.value = info
    loading.value = false
  }
  getData()

  /*---------------------------------------- 面包屑 --------------------------------------------- */
  const crumbs = computed(() => {
    return [{ name: parentName || '数据集', path: parentPath }, { name: detailInfo.value?.name ? detailInfo.value?.name : '' }]
  })

  /*----------------------------------------- 下载 --------------------------------*/
  const fileTaskStore = useFileTaskStore()

  // 下载查看更多
  const handleDownViewMore = async () => {
    manualMessage.loading('数据准备中,请耐心等待...', 0)
    try {
      // await dataManageApi.download({ id: data.id }, { isAddUid: true })
      const { data } = await customerPublicDataSetApi.download(
        { id: parentId },
        {
          isResponseAll: true,
          timeout: 300000 //设置超时时长5min
        }
      )
      if (data.code === 'SYSTEM-100000') {
        manualMessage.destroy()
        await message.success({ content: '成功添加至任务队列', icon: '', key: 'downloading', duration: 2 })
        fileTaskStore.changeTaskListOptions({
          open: true,
          key: '2',
          showDownFailed: false
        })
      } else {
        console.log('下载失败')
        manualMessage.destroy()
        message.error({ content: data.message, key: 'downloading', duration: 2 })
      }
    } catch (error) {
      console.log('下载失败', error)
      manualMessage.destroy()
      message.error({ content: '文件下载失败', key: 'downloading', duration: 2 })
    }
  }
</script>

<style lang="less" scoped>
  @import '../styles/index.less';

  .image-list-card {
    background-color: #fff;
    border: 1px solid @border1;
    border-radius: 10px;

    .header {
      display: flex;
      align-items: center;
      padding: 0 24px;
      height: 56px;
      border-bottom: 1px solid @border1;

      > li {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: @text03;
        gap: 0 16px;

        span {
          color: @text01;
        }

        &::after {
          margin: 0 24px 0 8px;
          width: 1px;
          height: 20px;
          background-color: @border2;
          content: '';
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    .image-list-card-wrap {
      display: grid;
      grid-template-columns: repeat(6, 210px);
      padding: 16px;
      gap: 16px;

      > li {
        overflow: hidden;
        width: 100%;
        height: 130px;
        background: @background5;
        border: 1px solid @border1;
        border-radius: 2px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .image-list-card-footer {
      display: flex;
      justify-content: center;
      margin: 16px 0 24px;
      color: @text03;
    }
  }

  .btn-list {
    display: flex;
    gap: 8px;
    align-items: center;
  }
</style>
